@import "normalize.less";

@import "variable.less";
@import "mixins.less";

.@{my-banner} {
    clear: both;
    line-height: 49px;
    width: 100%;
    background: #d41c4f;
    min-height: 50px;
    overflow: hidden;
}

.@{my-banner}>ul {
    width: @maxWidth;
    margin: 0 auto;


    >li {
        float: left;
        width: auto;
        display: inline-block;
        padding: 0 20px;
        #index-banner-hover.li-hover-mixins() !important;

        a {
            display: inline-block;
            color: #fff;
            font-size: 14px;
        }

        &.active {
            #index-banner-hover.active-hover() !important;
        }

    }
}


// body
body {
    background-@{bg-image}: url("@{imageBaseUrl}/loginRegisterBg.jpg");
}

.border-radius(@radius: 10px) {
    -ms-border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

.border(@px: 1px; @style: solid; @color: #ff0000) {
    border: @px @style @color;
}

;

.container {
    @{my-width}: @maxWidth;
    margin: 20px auto;
    background-@{bg-color}: #fff;
    padding: 5px;
    .border(2px; @style: solid);
    .border-radius();

    a {
        font-size: @base-font-size16;
        padding: 0 10px;
    }

    h1 {
        .desc()
    }

    .desc {
        font-size: @font-size25;
        color: @color;
    }
}

.container1 {
    @{my-width}: @maxWidth;
    margin: 20px auto;
    height: 100px;
    background-color: yellow;
    color: #333;
    .border-radius();
    .border(@style: solid);
    .base-style{
        color: #666;
        font-weight: 500;
    }
    .specifal-style{
        &:extend(.base-style);
        color:#ff0000;
    }

}

.container:after {

    content: "@{desc}@{say}";
}

h5,
h1 {
    color: white;
    font-size: 12px;
    line-height: 15px;
}


.bg(@prop; @value) {
    background-@{prop}: @value;
}

.padding(@position; @value) {
    padding-@{position}: @value;
}

.mutile-props(@prefix; @prop; @value) {
    @{prefix}-@{prop}: @value;
}

div {
    .mutile-props(padding; top; 10px);
    .mutile-props(margin; bottom; 30px);

    .mutile-props(border; left; 40px);

    .mutile-props(border-radius; end-end; 50px);

}


.mixin() {
    @bgcolor: #c0c0c0;
}

.average(@x, @y) {
    @result: ((@x + @y) / 2);
    @result1: ((@x + @y));
    @result2: ((@x - @y));
}

.myclass {
    @bgcolor: #fff;
    .mixin();
    background-color: @bgcolor;
    margin:.average(12,12)[@result];
}

.outermixin(@value){
    .nestedmixin(){
        font-weight: @value;
    }
}

div{
    .outermixin(400);
    .nestedmixin();
}